<template>
  <div>
    <div class="header-select">
      <el-input class="input" placeholder="请输入用户名" prefix-icon="el-icon-search" v-model="userNameSerch"
        clearable></el-input>
      <el-input class="input" placeholder="请输入手机号" prefix-icon="el-icon-search" v-model="phoneSerch"
        clearable></el-input>

      <el-select style="width: 150px;" clearable v-model="genderSerch" placeholder="请选择性别">
        <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
        </el-option>
      </el-select>
    </div>

    <!-- 表格 -->
    <div class="table">
      <el-table ref="multipleTable" :data="tableData" border style="width: auto">

        <el-table-column prop="userName" label="用户名" width="150px"></el-table-column>

        <el-table-column prop="phone" label="手机号" width="150px"></el-table-column>

        <el-table-column label="性别" width="100px">
          <template slot-scope="scope">
            <span>{{scope.row.gender==0?'男':'女'}}</span>
          </template>
        </el-table-column>

        <el-table-column label="当前容量" width="90px">
          <template slot-scope="scope">
            {{scope.row.currSizeStr}}
          </template>
        </el-table-column>

        <el-table-column label="最大容量" width="90px">
          <template slot-scope="scope">
            {{scope.row.maxSizeStr}}
          </template>
        </el-table-column>

        <el-table-column label="空间" width="180px">
          <template slot-scope="scope">
            <el-progress :stroke-width="18" :percentage="Math.ceil((scope.row.currSize / scope.row.maxSize) * 100)"
              :color="customColors" text-inside></el-progress>
          </template>
        </el-table-column>

        <el-table-column label="操作">
          <template slot-scope="scope">
            <!-- <el-button @click="preview(scope.row)" type="text" size="small">查看</el-button> -->
            <!-- <el-button @click="dilatation(scope.row)" type="text" size="small">扩容</el-button> Reduction-->
            <el-popover placement="top" width="auto">
              <p>请选择扩容大小</p>
              <div style="margin: 0 ;display: flex;">
                <el-button type="primary" size="mini" @click="dilatation(scope.row,1)">1G</el-button>
                <el-button type="primary" size="mini" @click="dilatation(scope.row,5)">5G</el-button>
                <el-button type="primary" size="mini" @click="dilatation(scope.row,10)">10G</el-button>
              </div>
              <el-button slot="reference" type="primary" plain style="margin-right: 10px;">扩充</el-button>
            </el-popover>

            <el-popover placement="top" width="auto">
              <p>请选择缩容大小</p>
              <div style="margin: 0 ;display: flex;">
                <el-button type="danger" size="mini" @click="reduction(scope.row,1)">1G</el-button>
                <el-button type="danger" size="mini" @click="reduction(scope.row,5)">5G</el-button>
                <el-button type="danger" size="mini" @click="reduction(scope.row,10)">10G</el-button>
              </div>
              <el-button slot="reference" type="danger" plain>缩减</el-button>
            </el-popover>
          </template>
        </el-table-column>
      </el-table>
    </div>

    <!-- 分页 -->
    <div class="page">
      <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage"
        :page-sizes="pageSizes" :page-size="pageSize" layout="total, sizes, prev, pager, next, jumper" :total="total">
      </el-pagination>
    </div>

    <!-- 修改用户信息弹窗 -->
    <!-- <el-dialog title="修改用户信息" :visible.sync="dialog" width="30%">
      
    </el-dialog> -->

    <el-drawer title="修改用户信息" :visible.sync="dialog" direction="rtl">
      <el-form status-icon ref="userInfo" label-width="100px" class="update-userInfo">
        <el-form-item label="用户名：">
          <el-input v-model="userName"></el-input>
        </el-form-item>
        <el-form-item label="密码：">
          <el-input type="password" show-password v-model="password" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="手机号：">
          <el-input v-model="phone"></el-input>
        </el-form-item>
        <el-form-item label="性别：">
          <el-radio v-model="gender" label="0">男</el-radio>
          <el-radio v-model="gender" label="1">女</el-radio>
        </el-form-item>
        <el-form-item>
          <el-button @click="dialog = false">取 消</el-button>
          <el-button type="primary" @click="">确 定</el-button>
        </el-form-item>
      </el-form>
    </el-drawer>


  </div>
</template>

<script>
  import apiUrl from '@/api/url'
  import link from '@/api/Link'
  import router from "@/router"
  import sizeTostr from '@/util/FileSizeUtil'
  import DownloadFile from '@/components/DownLoadFile.vue'
  import UpdateFile from '@/components/UpdateFile.vue'
  import MainHeader from '@/components/MainHeader.vue'
  export default {
    name: 'StorageManage',
    components: {

    },
    data () {
      return {
        customColors: [
          { color: '#0dbc79', percentage: 10 },
          { color: '#0dbc79', percentage: 40 },
          { color: '#0dbc79', percentage: 50 },
          { color: '#e6a23c', percentage: 80 },
          { color: '#f56c6c', percentage: 100 }
        ],
        pageSize: 5,
        pageSizes: [10, 15, 20, 30],
        currentPage: 1,
        total: 0,
        tableData: [],

        options: [{
          value: '0',
          label: '男'
        }, {
          value: '1',
          label: '女'
        }],
        genderSerch: '',
        userNameSerch: '',
        phoneSerch: '',

        dialog: false,
        userName: '',
        password: '',
        phone: '',
        gender: '',
        userId: '',

        creatDrawer: false,
        addUserName: '',
        addPassword: '',
        addPhone: '',
        addGender: '0',
        addRole: '0',


      }
    },
    methods: {
      //初始化
      init () {

        let data = {
          userName: this.userNameSerch,
          phone: this.phoneSerch,
          gender: this.genderSerch,
          role: 1
        }

        link(apiUrl.baseUrl + '/sys/user/findByPage/v2', 'POST', JSON.stringify(data)).then(ok => {
          if (ok.data.code == 0) {
            this.total = ok.data.data.total
            for (let i = 0; i < ok.data.data.users.length; i++) {
              ok.data.data.users[i].maxSizeStr = sizeTostr(ok.data.data.users[i].maxSize)
              ok.data.data.users[i].currSizeStr = sizeTostr(ok.data.data.users[i].currSize)
            }
            this.tableData = ok.data.data.users
          } else {
            this.$message.error('数据请求失败：' + ok.data.msg)
          }
        })

      },

      //分页监控
      handleCurrentChange (val) {
        this.currentPage = val
        this.init()
      },
      //分页监控
      handleSizeChange (val) {
        this.pageSize = val;
        this.init()
      },

      //扩充
      dilatation (row, num) {
        let data = {
          userId: row.id,
          num: num
        }
        link(apiUrl.baseUrl + '/sys/storage/dilatation/v1', 'POST', JSON.stringify(data)).then(ok => {
          if (ok.data.code === 0) {
            this.$message({
              message: "扩充成功",
              type: "success",
            });
            this.init()
          } else {
            this.$message({
              message: ok.data.msg,
              type: "error",
            });
          }
        })
      },
      //缩减
      reduction (row, num) {
        let data = {
          userId: row.id,
          num: num
        }
        link(apiUrl.baseUrl + '/sys/storage/reduction/v1', 'POST', JSON.stringify(data)).then(ok => {
          if (ok.data.code === 0) {
            this.$message({
              message: "缩减成功",
              type: "success",
            });
            this.init()
          } else {
            this.$message({
              message: ok.data.msg,
              type: "error",
            });
          }
        })
      }


    },
    mounted () {
      this.init()
    },
    watch: {
      userNameSerch (curVal, oldVal) {
        // 实现input连续输入，只发一次请求
        clearTimeout(this.timeout);
        this.timeout = setTimeout(() => {
          // this.getListPOI(curVal);
          this.init()
        }, 300);
      },
      phoneSerch (curVal, oldVal) {
        // 实现input连续输入，只发一次请求
        clearTimeout(this.timeout);
        this.timeout = setTimeout(() => {
          this.init()
        }, 300);
      },
      genderSerch (curVal, oldVal) {
        this.init()
      },
    }
  }
</script>

<style scoped>
  .table {
    margin: 10px;
    /* width: 90%;   */
  }

  .header-select {
    margin: 10px;
    display: flex;
  }

  .btn {
    margin-left: 10px;
  }

  .input {
    width: 150px;
    margin-right: 10px;
  }
</style>